<template>
	<view>
		<nav-box title="阶段详情" :borderBottom="true"></nav-box>
		<view class="content">
			<block v-for="(item, index) in list" :item="index">
				<view class="item-box" :style="{borderColor: item.finish ? '#2D6EFF' : '#D8D8D8'}">
					<view 
						class="info-box" 
						:class="item.finish && !item.active ? 'point-blue' : item.active && !item.finish ? 'point-light-blue' : 'point-grey'"
						:style="{borderColor: item.finish && !item.active ? '#2D6EFF' : item.active && !item.finish ? '#2DAFFF' : '#D8D8D8'}"
						 @click="toDetail(item.id, item.active)"
						>
						<view class="info-title">{{ item.title }}</view>
						<text>{{item.cycle}}</text>
						<image src="../../static/images/icon_finish.png" mode="" v-if="item.finish && !item.active" class="icon-finish"></image>
						<image src="../../static/images/nurse.png" mode="" v-else-if="item.active && !item.finish" class="icon-nurse"></image>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: 0,
			list: [
				{
					title: '第一阶段',
					cycle: '2021/05/21～2021/06/21',
					finish: true, //是否完成
					active: false //是否在此阶段
				},
				{
					title: '第二阶段',
					cycle: '2021/05/21～2021/06/21',
					finish: true,
					active: false
				},
				{
					title: '第三阶段',
					cycle: '2021/05/21～2021/06/21',
					finish: false,
					active: true
				},
				{
					title: '第四阶段',
					cycle: '2021/05/21～2021/06/21',
					finish: false,
					active: false
				}
			]
		};
	},
	methods: {
		toDetail(id, state) {
			if (state) {
				uni.navigateTo({
					url: '../previewDetail/previewDetail?id' + id
				})
			}
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #ffffff;
	.content {
		padding: 90upx 36upx 20upx 36upx;
		.item-box {
			position: relative;
			padding-left: 48upx;
			.icon-finish {
				width: 146upx;
				height: 146upx;
				position: absolute;
				bottom: 0;
				right: 0;
			}
			.icon-nurse {
				position: absolute;
				bottom: 0;
				right: 0;
				width: 146upx;
				height: 226upx;
			}
			&:not(:last-child) {
				border-left: 2upx solid;
				padding-bottom: 78upx;
			}
			.info-box {
				position: relative;
				box-shadow: 0px 8upx 30upx 0px rgba(17, 44, 104, 0.1);
				padding: 36upx 40upx;
				border-top: 8upx solid;
				&::before {
					content: '';
					width: 22upx;
					height: 22upx;
					border-radius: 50%;
					display: block;
					position: absolute;
					top: -16upx;
					left: -60upx;
					
				}
				.info-title {
					font-size: 40upx;
					color: #393939;
					margin-bottom: 20upx;
					font-weight: 600;
				}
				text {
					font-size: 24upx;
					color: #6E6E6E;
				}
			}
		}
	}
}

.point-blue {
	&::before {
		background-color: #2D6EFF;
	}
}
.point-grey {
	&::before {
		background-color: #D8D8D8;
	}
}
.point-light-blue {
	&::before {
		background-color: #2DAFFF;
	}
}
</style>
